<template>
  <div class="specials119">
    <TopBar type='1' :dataSourse='dayBanner' :hours='hours' :minutes='minutes' :seconds='seconds' v-if="titleTabActive == '1'" />
    <TopBar type='3' :dataSourse='previewBanner' :length='previewEveryDay.length' v-if="titleTabActive == '3'" />
    <TabBar class="tab-bar" v-model="titleTabActive" @change="changeSpecial" />
    <div class='specials_banner_tip' v-show="(dayBanner.length>0&&titleTabActive=='1')||(previewBanner.length>0&&titleTabActive=='3')">
      <img src="../../../assets/img/tttj_zhegai.png" alt="">
    </div>
    <!-- //每日劲爆特价 -->
    <div class='daySpecials' v-if="titleTabActive == 1" key="daySpecials">
      <div class='search_area'>
        <div class='divtip'>
          <input type="text" v-model="everyDayKeyWord" placeholder="输入商品名、商品首字母、厂家">
          <div class='div' @click='search(everyDayKeyWord,"天天")'>搜索</div>
        </div>
      </div>
      <div class='daySpecials_content'>
        <!-- //商品列表 -->
        <Scroller ref="scroller" @load='everyDayPromotionGoods()'>
          <GoodsList couponType='coupon' @showCards='showCards' :dataSoures='everyDayGoodsList' />
        </Scroller>
      </div>
    </div>
    <!-- //预告特价 -->
    <div class='weekSpecials' v-if="titleTabActive == 3">
      <div class='search_area' v-if="previewEveryDay.length>0">
        <div class='divtip'>
          <input type="text" v-model="everyDayKeyWord" placeholder="输入商品名、商品首字母、厂家">
          <div class='div' @click='search(everyDayKeyWord,"预告")'>搜索</div>
        </div>
      </div>
      <div class='tab_area'>
        <van-tabs ref='tabs' :ellipsis="false" v-model="activeTab" title-active-color='#FF540D' color='#FF540D' @click="changePreview">
          <van-tab v-for="(item,index) of previewEveryDay" :key="index" :title="item.name" :name="item.id">
          </van-tab>
        </van-tabs>
      </div>
      <Scroller ref="scroller" @load='everyDayPromotionGoods()'>
        <div class='goods1_area' v-if="everyDayGoodsList">
          <GoodsList couponType='coupon' typeIsPreview='preview' :previewBanner='previewBanner' @showCards='showCards' :dataSoures='everyDayGoodsList' />
        </div>
      </Scroller>
    </div>
    <!-- //弹窗详情 -->
    <DialogInfo :everyDayInfo='everyDayInfo' :show='show' @close='close' />
    <!-- //回到顶部 -->
    <div class='upgrade' @click='goTop'>
      <img src="https://image.hezongyy.com/pcimage/119h5/goup.png" alt="">
    </div>
    <!-- //加载转圈动画 -->
    <div class="activeLoading" v-if="activeLoadingShow"><img :src="activeLoading" alt="" /></div>
  </div>
</template>
<script>
import { getRequest } from '../../../api/indexGet'
import { postRequest } from '../../../api/index'
import url from '../../../axios/apiUrl'
import Xpng from '@/assets/image/X.png'
import TopBar from './topBar.vue'
import DialogInfo from '../../../components/DialogInfo'
import activeLoading from '@/assets/image/activeLoading.gif'
import TabBar from './tabBar.vue'
import { Scroller, GoodsList } from '@/components/Scroller'

export default {
  components: {
    TopBar,
    TabBar,
    DialogInfo,
    GoodsList,
    Scroller,
  },
  data() {
    return {
      activeLoading,
      activeLoadingShow: false,
      activeTab: '',
      everyDayKeyWord: '', //每日特价搜索词
      weekKeyWord: '', //预告预告搜索词
      Xpng, //图片关闭按钮
      showDay: true, //天天特价是否开启
      showRoutine: false, //常规特价是否开启
      showWeek: false, //周特价是否开启
      routineGoodsList: [], //常规特价商品列表
      everyDayGoodsList: [], //每日特价商品列表
      temp: {
        drugType: 0,
        isActivityPromotion: 1,
        isChoose: 0,
        isGift: 0,
        pageNumber: 1,
        pageSize: 40,
        keyWord: '', //常规特价搜索词
      },
      everyDayForm: {
        //每日 预告搜索词
        id: '',
        keyWord: '',
        pageNumber: 1,
        pageSize: 40,
      },
      show: false, //弹窗开关
      hours: '00',
      minutes: '00',
      seconds: '00',
      nowTime: 0, //当前时间
      endTime: 0, //结束时间
      everyDayInfo: {}, ///弹窗信息详情
      dayBanner: [], //每日特价 banner
      routineBanner: [], //常规特价banner
      previewBanner: [], //预告banner
      id: '', //天天特价 id 从活动倒计时接口来id
      promitionInfo: {}, //活动信息倒计时详情
      previewEveryDay: [], //活动预告
      titleTabActive: 1, // 1 /每日特价  3 /每周预告
    }
  },
  async mounted() {
    //顶部banner轮播图
    this.adPost()
    //倒计时
    await this.everyDayPromotionMsg()
    await this.everyDayPromotionGoods()
  },
  methods: {
    //回到顶部
    goTop() {
      let node = document.querySelector('.scroller')
      node.scrollTop = 0
    },
    //选择天天特价预告  的活动日期
    changePreview(id, value) {
      this.everyDayForm.pageNumber = 1
      this.promitionInfo.id = id
      this.everyDayKeyWord = ''
      this.everyDayPromotionGoods()
      this.goTop()
    },
    //获取预告活动时间以及id
    async previewEveryDayPromotionMsg() {
      let res = await getRequest(url.previewEveryDayPromotionMsg)
      if (res.data.code == '000000') {
        this.previewEveryDay = res.data.content
      } else {
        this.$toast(res.data.message)
      }
    },
    //顶部banner
    async adPost() {
      let res = await postRequest(url.adPost, {
        pageName: 'dailySpecials',
        clientType: 1,
      })
      if (res.data.code == '000000') {
        this.dayBanner = res.data.content.dailySpecialsBanner.items
        this.routineBanner = res.data.content.normalSpecialsBanner.items
        this.previewBanner = res.data.content.previewBanner.items
      }
    },
    //加入购物车
    async submit(item) {
      if (item.quantity != 0) {
        if (item.restriction == 0) {
          let res = await postRequest(url.addShopCarNew, {
            goodsId: item.id,
            itemType: item.itemType,
            goodsQuantity: item.initializeMinimum,
          })
          if (res.data.code == '000000') {
            this.$toast('加入购物车成功~')
            this.show = false
          }
          if (res.data.message == '系统异常') {
            this.$toast('网络异常，请稍后再试')
          } else if (res.data.code != '000000') {
            this.$toast(res.data.message)
          }
        } else {
          if (item.initializeMinimum > item.maximum) {
            this.$toast('已超过最大购买量，不能加入购物车')
          } else {
            let res = await postRequest(url.addShopCarNew, {
              goodsId: item.id,
              itemType: item.itemType,
              goodsQuantity: item.initializeMinimum,
            })
            if (res.data.code == '000000') {
              this.$toast('加入购物车成功~')
              this.show = false
            }
            if (res.data.message == '系统异常') {
              this.$toast('网络异常，请稍后再试')
            } else if (res.data.code != '000000') {
              this.$toast(res.data.message)
            }
          }
        }
      } else {
        this.$toast('该商品已售罄')
      }
    },
    //关闭弹窗
    close() {
      this.show = false
    },
    //加购弹窗
    showCards(item) {
      this.show = true
      this.everyDayInfo = item
    },
    //每日特价
    async everyDayPromotionGoods() {
      this.everyDayForm.id = this.promitionInfo.id
      this.everyDayForm.keyWord = this.everyDayKeyWord
      this.activeLoadingShow = true
      let res = await postRequest(url.everyDayPromotionGoods, this.everyDayForm)
      if (res.data.code == '000000') {
        this.activeLoadingShow = false
        if (this.everyDayForm.pageNumber == 1) {
          this.everyDayGoodsList = []
        }
        this.everyDayForm.pageNumber++
        this.everyDayGoodsList = this.everyDayGoodsList.concat(
          res.data.content.list
        )
        if (
          res.data.content.list.length < 40 ||
          res.data.content.list.length == null
        ) {
          // 数据全部加载完成
          this.$refs['scroller'].loadOver()
        } else {
          this.$refs['scroller'].canLoad()
        }
        if (this.everyDayGoodsList) {
          this.everyDayGoodsList.map((obj) => {
            this.$set(obj, 'initializeMinimum', 1)
            this.$set(obj, 'maximum', obj.maxBuyNumber)
            this.goodsAdd.pageInit(obj, this)
          })
        }
      } else {
        this.activeLoadingShow = false
        this.$toast(res.data.message)
      }
    },
    //常规特价搜索
    async search(value, name) {
      // if (name == '常规') {
      //   this.temp.keyWord = value
      //   this.temp.pageNumber = 1
      //   await this.promotionActivity()
      // } else
      this.everyDayForm.pageNumber = 1
      if (name == '天天') {
        this.everyDayKeyWord = value
        await this.everyDayPromotionGoods()
      } else if (name == '预告') {
        this.everyDayKeyWord = value
        await this.everyDayPromotionGoods()
      }
      this.goTop()
    },
    //常规特价
    async promotionActivity() {
      this.activeLoadingShow = true
      let res = await postRequest(url.promotionActivity, this.temp)
      if (res.data.code == '000000') {
        this.activeLoadingShow = false
        if (this.temp.pageNumber == 1) {
          this.routineGoodsList = []
        }
        this.temp.pageNumber++
        this.routineGoodsList = this.routineGoodsList.concat(
          res.data.content.list
        )
        if (
          res.data.content.list.length < 40 ||
          res.data.content.list.length == null
        ) {
          // 数据全部加载完成
          this.$refs['scroller'].loadOver()
        } else {
          this.$refs['scroller'].canLoad()
        }
        if (this.routineGoodsList) {
          this.routineGoodsList.map((obj) => {
            this.$set(obj, 'initializeMinimum', 1)
            this.$set(obj, 'maximum', obj.maxBuyNumber)
            this.goodsAdd.pageInit(obj, this)
          })
        }
      } else {
        this.activeLoadingShow = false
        this.$toast(res.data.message)
      }
    },

    //选择tab切换天天 常规 预告预告
    async changeSpecial(index) {
      this.activeTab = '' //切换的时候  清空掉预告活动当前选中的活动
      this.temp.keyWord = ''
      this.everyDayKeyWord = ''
      this.activeLoadingShow = true
      this.everyDayForm.pageNumber = 1
      this.everyDayGoodsList = []
      // 1每日特价2常规特价
      if (index == 1) {
        await this.everyDayPromotionMsg()
        this.promitionInfo.id = this.promitionInfo.id
        this.showDay = true
        this.showRoutine = false
        this.showWeek = false
        await this.$nextTick()
        await this.everyDayPromotionGoods()
      }
      //  else if (index == 2) {
      //   this.temp.keyWord = ''
      //   this.everyDayKeyWord = ''
      //   this.showDay = false
      //   this.showWeek = false
      //   this.showRoutine = true
      //   this.temp.pageNumber = 1
      //   this.promotionActivity()
      // }
      else if (index == 3) {
        await this.previewEveryDayPromotionMsg()
        if (this.previewEveryDay.length > 0) {
          this.promitionInfo.id = this.previewEveryDay[0].id
        }
        this.showWeek = true
        this.showDay = false
        this.showRoutine = false
        await this.$nextTick()
        await this.everyDayPromotionGoods()
      }
    },
    //活动倒计时
    async everyDayPromotionMsg() {
      let res = await getRequest(url.everyDayPromotionMsg)
      if (res.data.code == '000000') {
        this.promitionInfo = res.data.content
        this.countDownInit()
        this.getNowTime()
      } else if (res.data.code == '900000') {
        this.$toast('网络异常，请稍后再试！')
      } else {
        this.$toast(res.data.message)
      }
    },

    // 获取当前时间
    countDownInit() {
      clearInterval(this.curTime)
      this.curTime = setInterval(() => {
        this.promitionInfo.serverTime = this.promitionInfo.serverTime + 1000
      }, 1000)
    },
    // 计算时间
    getNowTime() {
      this.timeName = setInterval(() => {
        //计算距离本场开始剩余时间
        if (this.promitionInfo.status == 1) {
          // 结束时间时间戳
          if (this.promitionInfo.endTime - this.promitionInfo.serverTime > 0) {
            this.hours = Math.floor(
              ((this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                1000 /
                60 /
                60) %
                24
            )
            // 判断小时是否大于24小时
            if (
              this.promitionInfo.endTime - this.promitionInfo.serverTime >
              86400000
            ) {
              let num = parseInt(
                (this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                  86400000
              )
              this.hours = num * 24 + this.hours
            }
            this.minutes = Math.floor(
              ((this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                1000 /
                60) %
                60
            )
            this.seconds = Math.floor(
              ((this.promitionInfo.endTime - this.promitionInfo.serverTime) /
                1000) %
                60
            )
            if (this.hours < 10) {
              this.hours = '0' + this.hours
            }
            if (this.minutes < 10) {
              this.minutes = '0' + this.minutes
            }
            if (this.seconds < 10) {
              this.seconds = '0' + this.seconds
            }
          } else {
            this.hours = '00'
            this.minutes = '00'
            this.seconds = '00'
            this.promitionInfo.status_ = 0
            this.status_ = 0
          }
        }
      }, 1000)
    },
  },
  beforeDestroy() {
    clearInterval(this.timeName)
    clearInterval(this.curTime)
  },
}
</script>
<style lang="less" src="./index.less" scoped></style>
